<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>極光 - AEON 音乐播放器</title>
    <link rel="stylesheet" href="assets/css/music.css">
    <link rel="stylesheet" href="assets/style.css">
</head>

<body>
    <div class="main">
        <div class="music-box">

            <!-- 音乐盒子头部 -->
            <div class="music-top">
                <a href="index.html"><img src="assets/images/logo-w.png" alt="logo-w"></a>
            </div>

            <!-- 音乐盒子区域 -->
            <div class="content">
                <!-- 音乐盒子侧边栏 -->
                <div class="music-aside">
                    <div class="list-item" data-name="home">
                        <i class="icon-home"></i>
                        <p>首页</p>
                    </div>
                    <div class="list-item" data-name="love">
                        <i class="icon-heart"></i>
                        <p>我喜欢的音乐</p>
                    </div>
                    <div class="list-item" data-name="local">
                        <i class="icon-download2"></i>
                        <p>本地音乐</p>
                    </div>
                    <div class="list-item" data-name="star">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>
                    <div class="list-item">
                        <i class="icon-music"></i>
                        <p>收藏歌单</p>
                    </div>

                </div>

                <!-- 音乐盒子主区域 -->
                <div class="music-main">

                    <!-- 主页 -->
                    <div class="home">
                        <img src="assets/images/logo.png" alt="logo">
                        <p>本地音乐播放器</p>
                    </div>

                    <!-- 我喜欢的音乐 -->
                    <div class="love">
                        <h1 class="title">我喜欢的音乐</h1>
                    </div>

                    <!-- 本地音乐 -->
                    <div class="local">
                        <h1 class="title">本地音乐</h1>
                    </div>

                    <!-- 收藏歌单 -->
                    <div class="star">
                        <h1 class="title">收藏歌单</h1>
                    </div>

                    <!-- 音乐信息 -->
                    <div class="play">
                        <div class="music-img">
                            <div class="img rotate">
                                <img src="assets/images/black.png" alt="black" id="black">
                                <img src="assets/images/aeon.png" alt="music" id="musicImg">
                            </div>
                        </div>
                        <div class="music-info">
                            <div class="info">
                                <h1 class="title">極光</h1>
                                <p class="artist">AEON</p>
                            </div>
                            <div class="lyric">
                                <p>暂无歌词</p>
                            </div>
                        </div>
                    </div>

                    <!-- 音乐列表 -->
                    <div class="music-list">
                        <div class="list-top">
                            <p class="title">当前播放</p>
                            <p class="sub-title">总 <span class="num">0</span> 首</p>
                        </div>
                        <!-- <div class="list-itme">
                            <p class="name">Lost Gameasdfasodifjpasoidfjpasoijfpsoaidjfpaijdf</p>
                            <p class="author">Nulbaricasdfsafsadfsafdh</p>
                            <p class="time">04:03</p>
                        </div> -->

                    </div>

                </div>

            </div>

            <!-- 音乐盒子底部 -->
            <div class="music-footer">
                <div class="music-info">
                    <div class="music-img">
                        <img src="assets/images/aeon.png" alt="music" id="musicInfo">
                    </div>
                    <div class="text">
                        <p class="name">極光</p>
                        <p class="singer">AEON</p>
                    </div>
                    <audio src=""></audio>
                </div>
                <div class="music-control">
                    <div class="controls">
                        <i class="icon-previous2 prev"></i>
                        <i class="icon-pause2 pause"></i>
                        <i class="icon-play3 play" id="play"></i>
                        <i class="icon-next2 next"></i>
                    </div>
                    <div class="time-bar">
                        <p class="start-time">00:00</p>
                        <input type="range" class="bar" step="1" value="0" min="0" max="100">
                        <p class="end-time">00:00</p>
                    </div>
                </div>

                <div class="music-options">
                    <i class="icon-loop loop"></i>
                    <i class="icon-volume-high sound"></i>
                    <i class="icon-volume-mute2 mute"></i>
                    <div class="sound-bar">
                        <input type="range" class="bar" step="1" value="100" min="0" max="100">
                    </div>

                    <i class="icon-paragraph-justify list"></i>

                </div>
            </div>

        </div>
    </div>
</body>

<script src="assets/js/jsmediatags.js"></script>
<script src="assets/js/jsmediatags.min.js"></script>
<script src="assets/js/music.js"></script>

</html>